<template>
    <div>
        <van-nav-bar title="首页" />
        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div style="font-size: 20px;" @click="onClickButton"><van-icon name="bars" /></div>
            </template>
        </van-search>
        <van-tabs v-model:active="active">
            <van-tab title="奶粉"></van-tab>
            <van-tab title="纸尿裤">内容 2</van-tab>
            <van-tab title="营养辅食">内容 3</van-tab>
            <van-tab title="玩具">内容 4</van-tab>
            <van-tab title="母婴用品">内容 4</van-tab>

        </van-tabs>
        <van-grid :column-num="4">
            <van-grid-item v-for="value in 4" :key="value" icon="photo-o" text="文字" />
        </van-grid>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <div class="list" v-for="item in list">

                <div>
                    <router-link :to="{ name: 'detail', params: { goods_id: item.goods_id } }">
                        <van-card :price="item.goods_price" :title="item.goods_name"
                            :thumb="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />


                    </router-link>

                </div>
                <div>
                    <router-link :to="{ name: 'detail', params: { goods_id: item.goods_id } }">
                        <van-card :price="item.goods_price" :title="item.goods_name"
                            :thumb="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'" />
                    </router-link>

                </div>





            </div>
        </van-pull-refresh>






    </div>
</template>

<script setup>
import router from '@/router';
import { ref } from 'vue';
import { showToast } from 'vant';
const onClickButton = () => {
    router.push('/home/cla')
}
import { searchApi } from '@/api/api';
let list = ref([])
searchApi().then(res => {
    console.log('列表', res)
    list.value = res.data.message.goods
})
const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        searchApi()
        showToast('刷新成功');
        loading.value = false;

    }, 1000);
};
</script>

<style lang="scss" scoped>
.list {
    column-count: 2;
    column-gap: 20px;

    .div {
        margin-bottom: 30px;
    }
}
</style>